import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Col, InputNumber, Row, Slider } from 'antd';
import style from './style.module.scss'
import { useMonthStore } from "@/stores/monthStore";
import { throttle } from '@/utils/throttle';

const IntegerStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(1);
  const curMonth = useMonthStore(state => state.month)
  const setMonth = useMonthStore(state => state.setMonth)

  useEffect(() => {
    setInputValue(curMonth as number);
  }, [])

  // 使用 useCallback 缓存函数
  const handleChange = useCallback((value: number) => {
    setMonth(value);
  }, [setMonth]);

  const throttledChange = useMemo(() =>
    throttle(handleChange, 300, { leading: true, trailing: true }), [handleChange]);

  return (
    <div className={style.main}>
      <div className={style.bottom}>
        <div className={style.label}>选择月份：</div>
        <div className={style.slider}>
          <Row>
            <Col span={12}>
              <Slider
                min={1}
                max={12}
                onChange={(value) => {
                  setInputValue(value)
                  throttledChange(value)
                }}
                value={inputValue}
                tooltip={{ open: false }}
              />
            </Col>
            <Col span={4}>
              <InputNumber
                min={1}
                max={12}
                value={inputValue}
                onChange={(value) => {
                  setInputValue(value as number)
                  throttledChange(value)
                }}
              />
            </Col>
          </Row>
        </div>
      </div>
    </div>
  );
};

export default IntegerStep;